<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘画板</title>
		<style>
			.Toolbar{
				width: 253px;
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				text-align: center;
				background: #f2f7fe;
				padding: 10px 15px 3px 10px;
				margin-bottom: 1px;
				margin-right: 1px;
				border: 1px solid #7b899b;
			}
			img{
				padding: 2px;
				border: 2px solid #F2F7FE;
			}
			img:hover{
				border: 2px  groove #e4f0fe;
				background: white;
			}
			.containerCanvas{
				clear: both;
			}
			canvas{
				border: 1px solid #7B899B;
			}
			button{
				padding: 6px;
				margin: 2px 2px;
				font-size: 14px;
				background: #F2F7FE;
			}
			#eraser_size{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="Toolbar">
			<img id="renpen" src="img/pen_red.gif"/>
			<img id="greenpen" src="img/pen_green.gif"/>
			<img id="bluepen" src="img/pen_blue.gif"/>
			<img id="blackpen" src="img/pen_black.gif"/>
		</div>
		<div class="Toolbar">
			<img id="pen_thin" src="img/pen_thin.gif"/>
			<img id="pen_medium" src="img/pen_medium.gif"/>
			<img id="pen_thick" src="img/pen_thick.gif"/>
		</div>
		<div class="Toolbar">
			<img id="eraser_thin" src="img/eraser_thin.gif"/>
			<img id="eraser_medium" src="img/eraser_medium.gif"/>
			<img id="eraser_thick" src="img/eraser_thick.gif"/>
		</div>
		<div class="Toolbar">
			<img id="pen_color" src="img/pen_black.gif"/>
			<img id="pen_size" src="img/pen_thick.gif"/>
			<img id="eraser_size" src="img/eraser_thin.gif"/>
		</div>
		<div class="containerCanvas">
			<canvas id="canvas"></canvas>
		</div>
		<button id="clear">清除画面</button>
		<button id="save">保存画面</button>
		<script>
			window.onload=function(){
				var canvas=document.getElementById("canvas")
				var cxt=canvas.getContext("2d")
				canvas.width=1200
				canvas.height=500
				var canvasx=canvas.getBoundingClientRect().left;
				var canvasy=canvas.getBoundingClientRect().top;
				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener("mousedown",downfun)
				canvas.addEventListener("mousemove",movefun)
				canvas.addEventListener("mouseup",upfun)
				var startx
				var starty
				var endx
				var endy
				cxt.lineWidth=3
				var offon=false
				function downfun(e){
					offon=true
					startx=e.clientX-canvasx
					starty=e.clientY-canvasy
				}
				function movefun(e){
					if(offon==true){
						cxt.beginPath()
						endx=e.clientX-canvasx
						endy=e.clientY-canvasy
						cxt.moveTo(startx,starty)
						cxt.lineTo(endx,endy)
						cxt.stroke()
						
						startx=endx
						starty=endy
						console.log("1111")
					}
				}
				function upfun(){
					offon=false
					cxt.closePath()
				}
				document.getElementById("clear").onclick=function(){
					cxt.clearRect(0,0,canvas.width,canvas.height)
				}
				//画笔颜色
				document.getElementById("renpen").onclick=function(){
					cxt.strokeStyle="red"
					document.getElementById("pen_color").src="img/pen_red.gif"
					document.getElementById("eraser_size").style.display="none"
					document.getElementById("pen_size").style.display="inline"
					document.getElementById("pen_color").style.display="inline"
				}
				document.getElementById("blackpen").onclick=function(){
					cxt.strokeStyle="black"
					document.getElementById("pen_color").src="img/pen_black.gif"
					document.getElementById("eraser_size").style.display="none"
					document.getElementById("pen_size").style.display="inline"
					document.getElementById("pen_color").style.display="inline"
				}
				document.getElementById("greenpen").onclick=function(){
					cxt.strokeStyle="green";
					document.getElementById("pen_color").src="img/pen_green.gif"
					document.getElementById("eraser_size").style.display="none"
					document.getElementById("pen_size").style.display="inline"
					document.getElementById("pen_color").style.display="inline"
				}
				document.getElementById("bluepen").onclick=function(){
					cxt.strokeStyle="blue";
					document.getElementById("pen_color").src="img/pen_blue.gif"
					document.getElementById("eraser_size").style.display="none"
					document.getElementById("pen_size").style.display="inline"
					document.getElementById("pen_color").style.display="inline"
				}
				//画笔粗细
				document.getElementById("pen_thin").onclick=function(){
					cxt.lineWidth=3
					document.getElementById("pen_size").src="img/pen_thin.gif"
					document.getElementById("eraser_size").style.display="none"
					document.getElementById("pen_size").style.display="inline"
					document.getElementById("pen_color").style.display="inline"
				}
				document.getElementById("pen_medium").onclick=function(){
					cxt.lineWidth=5
					document.getElementById("pen_size").src="img/pen_medium.gif"
					document.getElementById("eraser_size").style.display="none"
					document.getElementById("pen_size").style.display="inline"
					document.getElementById("pen_color").style.display="inline"
				}
				document.getElementById("pen_thick").onclick=function(){
					cxt.lineWidth=10
					document.getElementById("pen_size").src="img/pen_thick.gif"
					document.getElementById("eraser_size").style.display="none"
					document.getElementById("pen_size").style.display="inline"
					document.getElementById("pen_color").style.display="inline"
				}
				//橡皮擦
				document.getElementById("eraser_thin").onclick=function(){
					cxt.strokeStyle="white"
					document.getElementById("eraser_size").src="img/eraser_thin.gif"
					document.getElementById("eraser_size").style.display="inline"
					document.getElementById("pen_size").style.display="none"
					document.getElementById("pen_color").style.display="none"
					cxt.lineWidth=5
				}
				document.getElementById("eraser_medium").onclick=function(){
					cxt.strokeStyle="white"
					document.getElementById("eraser_size").src="img/eraser_medium.gif"
					document.getElementById("eraser_size").style.display="inline"
					document.getElementById("pen_size").style.display="none"
					document.getElementById("pen_color").style.display="none"
					cxt.lineWidth=10
				}
				document.getElementById("eraser_thick").onclick=function(){
					cxt.strokeStyle="white"
					document.getElementById("eraser_size").src="img/eraser_thick.gif"
					document.getElementById("eraser_size").style.display="inline"
					document.getElementById("pen_size").style.display="none"
					document.getElementById("pen_color").style.display="none"
					cxt.lineWidth=20
				}
				document.getElementById("save").onclick=function(){
					var a=document.createElement("a")
					 document.body.appendChild(a)
					 var url=canvas.toDataURL()
					 a.href=url
					 a.download="画板作品"
					 a.click()
				}
			}
		</script>
	</body>
</html>
